<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<!-- 元素遍历：  用于DOM树中遍历元素 【理解：针对元素嵌套，父子级】
		  children()            功能：获取匹配元素集合中每个元素的子元素
		  parent()              功能：获取匹配元素集合中每个元素的子元素
		  
		  siblings()            功能：获取匹配元素集合中每个元素的所有兄弟元素
		  
		  next()                功能：获取匹配元素集合中每个元素的下一个兄弟元素
		  prev()                功能：获取匹配元素集合中每个元素的上一个兄弟元素
		  
		  each()                功能：遍历匹配元素集合--遍历所有子元素
		                        语法糖:each(function(index,element){
									   $(element).text(``)
									   注意：打印遍历的值，不可以使用单双引号+拼接
									   功能：获取到的元素，遍历元素内容
								})
								   index：下标   element：元素  形参
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
		 <style>
			 .container{
				 border: 1px solid #323232;
				 margin: 10px;
				 padding: 10px;
			 }
			 .box{
				 background-color: #00ffff;
				 margin: 10px;
				 padding: 10px;
			 }
			 button{
				 margin: 10px;
			 }
		 </style>
	</head>
	<body>
		<!-- html：   div.container 父级  6个div.box 每个#box1  子级
		              6个按钮
			 css：    .comtainer添加样式  边框1px、内外边距10px
			          .box添加样式        背景色、内外边距10px
					  button添加样式     外边距：5px
			 jq：     引入
		 -->
		 <div class="container">
		 <div class="box" id="box1">盒子1</div>
		 <div class="box" id="box2">盒子2</div>
		 <div class="box" id="box3">盒子3</div>
		 <div class="box" id="box4">盒子4</div>
		 <div class="box" id="box5">盒子5</div>
		 <div class="box" id="box6">盒子6</div>
		 </div>
		 <button id="gc">获取子元素</button>
		 <button id="gp">获取父元素</button>
		 <button id="gs">获取兄弟元素</button>
		 <button id="gn">获取下一个兄弟元素</button>
		 <button id="gr">获取上一个兄弟元素</button>
		 <button id="loop">遍历元素</button>
		 <script>
			 /* 1.点击 获取子元素 按钮   实现.container下所有子元素添加背景色*/
             $("#gc").click(function(){
				 //通过 父找子 函数 --添加效果
				 $(".container").children().css("background-color","darkorange");
			 });
			 /* 2.点击 获取父元素  实现.container 添加背景色*/
			 $("#gp").click(function(){
				 $(".box").parent().css("background-color","blueviolet")
			 });
			 /* 3.点击 获取兄弟元素 按钮   实现除了 #box4 字体颜色不变，其他都变色 */
			 $("#gs").click(function(){
				 $("#box4").siblings().css("color","blue")
			 });
			 /* 4.点击 获取下一个兄弟元素 按钮 实现#box4 下一个兄弟，添加背景色 */
			 $("#gn").click(function(){
				 $("#box4").next().css("background-color","chartreuse")
			 });0+
			 /* 5.点击 获取上一个兄弟元素 按钮 实现#box6 上一个兄弟，添加效果
			                                        圆、背景图、背景色、盒子阴影
			 */
			 $("#gr").click(function(){
				 $("#box6").prev().css({"width":"100px",
				                        "height":"100px",
										"background-color":"#ff0",
										"border-radius":"50%",
										"box-shadow":"5px 5px 10px #ff0",
										"font-size":"0"
				 });
			 });
			 /* 6.点击 遍历元素 按钮  实现每个盒子上，这是第几个盒子*/
			 $("#loop").click(function(){
				 // 通过 .box 抓到6个元素【一组集合】
				 $(".box").each(function(i,e){  //e 代表6个元素   i 代表下标
					 //每个盒子加文字：这是第几个盒子
					 $(e).text(`这是第${i+1}盒子`);
				 });
			 });
			 /* 大作业：tab选项卡
			 BOM【了解】吸顶灯效果案例
			 小米页面效果
			 */
		 </script>
	</body>
</html>